<template>
  <!--组合页面内容，通常情况下，包含header、main、footer等部分，
  其中header、footer中的内容通常是固定的，而main中的内容则根据路由动态切换-->
  <el-container direction="vertical">
    <page-header />
    <!--页面主体区域，可以分为侧边栏以及main主体区域，可以放入到一个布局容器中-->
    <el-container style="height: 800px">
      <page-aside />
      <!--网站页面展示的主体区域-->
      <el-main>
        <!--思考，如何根据菜单栏的内容选择在本区域展示什么内容-->
        <!--router-view组件，用于实时展示路由匹配到的组件内容-->
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import { RouterView } from 'vue-router'
import PageHeader from '@/components/layout/PageHeader.vue'
import PageAside from '@/components/layout/PageAside.vue'
</script>

<style>
/* 重置默认样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#app {
  width: 100%;
  margin: 5px;
}

.header_container {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 0 20px;
  align-items: center;
  height: 60px;
  /*设置头部与其它区域的区别样式，如盒子阴影、边框、背景颜色等内容*/
  background-color: #fafafa;
  box-shadow: #999999 0 1px;
}

.header_container .project_name {
  font-size: 20px;
  font-family: 楷体, serif;
  font-weight: bolder;
  color: #000000;
}

/* 工具栏区域 */
.header_container .toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
}

.header_container .toolbar .el-button {
  font-size: 13px;
}
</style>
